<template>
  <div class="box">
    <!-- 内容 -->
    <div style="width: 95%; height: 100%; margin: 0 auto" class="box-content">
      <!-- 头部 -->
      <div class="box-top" style="display: flex">
        <div style="width: 40%" class="box-top-left">
          <div class="daohang">
            <i style="font-size: 20px; color: #999; line-height: 60px; float: left" class="el-icon-s-home"></i>
            <el-breadcrumb>
              <el-breadcrumb-item style="font-size: 15px; color: #999; line-height: 60px; margin-left: 8px; display: block; float: left">首页 </el-breadcrumb-item>
              <i style="font-size: 15px; line-height: 63px; margin-left: -3px; float: left" class="el-icon-folder-opened"></i>
              <el-breadcrumb-item style="font-size: 15px; line-height: 64px; margin-left: 8px; display: block; float: left">财务管理</el-breadcrumb-item>
              <i style="font-size: 15px; line-height: 63px; margin-left: 5px; float: left" class="el-icon-folder-opened"></i>
              <el-breadcrumb-item style="font-size: 15px; line-height: 64px; margin-left: 8px; display: block; float: left">基本功能</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="middle">
        <div class="choice" style="display: flex; align-items: center">
          <a style="margin-left: 20px; border-radius: 10px; width: 80px; height: 34px; display: block; line-height: 34px" @click="curId = 0" :class="{ cur: curId === 0 }">
            <span style="font-size: 15px; display: block; text-align: center">满额立减</span></a
          >
          <a
            style="font-size: 15px; border-radius: 10px; width: 80px; height: 34px; margin-left: 20px; line-height: 34px; width: 100px; display: block"
            @click="curId = 1"
            :class="{ cur: curId === 1 }"
          >
            <span style="font-size: 15px; display: block; text-align: center">满额包邮</span></a
          >

          <a
            style="font-size: 15px; border-radius: 10px; width: 80px; height: 34px; margin-left: 20px; line-height: 34px; width: 100px; display: block"
            @click="curId = 2"
            :class="{ cur: curId === 2 }"
          >
            <span style="font-size: 15px; display: block; text-align: center">充值满送</span></a
          >
        </div>
        <div class="choice-box" v-show="curId === 0">
          <!-- 选项卡盒子 -->
          <div class="Discount">
            <span style="display: block; margin-left: 20px; line-height: 50px; display: flex">
              <span style="color: #46b2f7; display: block; font-size: 18px"> |&nbsp; </span>当前位置:&nbsp;&nbsp;&nbsp;
              <span style="color: #46b2f7">满额立减设置</span>
            </span>
            <div class="Discount-box">
              <div class="Discount-box-input">
                <div style="width: 15%; border-right: 1px solid #f0f0f0">
                  <span style="display: block; text-align: center; line-height: 30px">单笔订单满</span>
                </div>
                <input style="width: 27%; border: none" v-model="full" />
                <div style="width: 15%; border-left: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0">
                  <span style="display: block; text-align: center; line-height: 30px">元 立减</span>
                </div>
                <input style="width: 27%; border: none" v-model="reduce" />
                <div style="width: 8%; border-left: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0">
                  <span style="display: block; text-align: center; line-height: 30px">元</span>
                </div>
                <div @click="reduce1()" style="width: 8%"><span style="display: block; text-align: center; line-height: 30px">—</span></div>
              </div>
              <button class="addDis">+增加优惠项</button>
              <span v-if="isFalse" style="color: red; position: absolute; top: 115px; left: 25px">俩次都填写才能生效</span>
              <button class="addDis1" @click="preservation()">保存设置</button>
            </div>
          </div>
        </div>
        <div class="Discount2" v-show="curId === 1">
          <h6 style="font-size: 13px; margin-left: 30px">满额包邮</h6>
          <p style="font-size: 13px; margin-left: 30px; color: #999; margin-top: 5px">开启满包邮,订单总金额超过多少可以包邮</p>
          <div class="Discount2-box-input" style="width: 500px; display: flex; margin-top: 35px; margin-left: 50px">
            <div style="width: 15%; border-right: 1px solid #f0f0f0">
              <span style="display: block; text-align: center; line-height: 30px">单笔订单满</span>
            </div>
            <input style="width: 27%; border: 1px solid #f0f0f0" v-model="full" />
            <div style="width: 6%; border: 1px solid #f0f0f0">
              <span style="display: block; text-align: center; line-height: 30px">元</span>
            </div>
            <input style="width: 27%; border: 1px solid #f0f0f0" v-model="reduce" />
            <div style="width: 6%; border: 1px solid #f0f0f0">
              <span style="display: block; text-align: center; line-height: 30px">元</span>
            </div>
          </div>
          <span v-if="isFalse" style="color: red; display: block; margin-left: 137px; margin-top: 10px">如果开启满额包邮,设置0为全场包邮</span>
          <div class="region" style="display: flex; margin-top: 30px; width: 650px">
            <span style="display: block; font-size: 14px; margin-left: 60px; line-height: 30px">不参与的地区</span>
            <span style="display: block; font-size: 12px; margin-left: 15px; margin-top: 10px">{{ search.province }}&nbsp;{{ search.city }}</span>
            <div id="app" style="margin-left: 10px; margin-top: -5px">
              <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"> </el-cascader>
              <button @click="show()" style="width: 130px; height: 30px; margin-left: 20px">设置不包邮地区的邮费</button>
            </div>
          </div>
          <div class="reg">
            <span style="display: block; font-size: 14px; line-height: 30px">不参与包邮的商品</span>
            <div>
              <input style="width: 240px; height: 25px; background: #929292; border: none" type="text" /><button
                @click="choice()"
                style="width: 80px; height: 26px; background: white; border: 1px solid #999"
              >
                选择商品
              </button>
            </div>
          </div>
          <button @click="preservation()" style="width: 80px; height: 30px; margin-left: 55px">保存设置</button>
        </div>
        <div v-show="curId === 2">
          <div class="Recharge">
            <div style="margin-top: 20px; margin-left: 23px">
              <button style="width: 35px; height: 35px; background: white; border: 1px solid #f0f0f0">满</button>
              <input v-model="full" style="width: 215px; height: 35px; background: white; border: 1px solid #f0f0f0" type="text" />
              <button style="width: 55px; height: 35px; background: white; border: 1px solid #f0f0f0">赠送</button>
              <input v-model="reduce" style="width: 215px; height: 35px; background: white; border: 1px solid #f0f0f0" type="text" />
              <button style="width: 35px; height: 35px; background: white; border: 1px solid #f0f0f0">元</button>
              <button @click="clear()" style="width: 50px; height: 35px; background: #eb6060; border: 1px solid #f0f0f0; color: white">✖</button>
            </div>
            <button style="margin-top: 5px; margin-left: 23px; width: 100px; height: 35px; border: 1px solid #f0f0f0; background: white">+增加优惠项</button>
            <span style="display: block; margin-top: 10px; margin-left: 23px; color: #b8bab9">俩项都填写才能生效,增送的余额可以固定数或比例(带%)号</span>
            <span style="display: block; margin-top: 10px; margin-left: 23px; color: #b8bab9">例如:充值满100,赠送10</span>
            <span style="display: block; margin-top: 10px; margin-left: 23px; color: #b8bab9">例如:充值满200,赠送15%,实际赠送30(200*15%)</span>
            <button @click="preservation()" style="margin-top: 36px; margin-left: 23px; width: 105px; height: 35px; background: #44abf7; border: none">保存设置</button>
          </div>
        </div>
      </div>

      <div v-if="isShow" class="popContainer">
        <div class="popContainer-box" style="position: relative">
          <div style="width: 100%; height: 60px; background: #bbbbbb; display: flex; justify-content: space-between" class="popContainer-box-top">
            <span style="font-size: 14px; display: block; margin-left: 20px; margin-top: 20px">邮政设置</span>
            <span @click="cancel()" style="font-size: 20px; display: block; margin-right: 20px; margin-top: 15px">❌</span>
          </div>
          <div style="display: flex; margin-top: 40px; margin-left: 50px">
            <span style="display: block; margin-top: 8px">北京</span>
            <input v-model="full1" style="width: 80px; height: 25px; margin-left: 20px" type="text" />
            <div style="width: 40px; height: 26px; border: 1px solid #c3c3c3; text-align: center; line-height: 25px">元</div>
          </div>
          <div style="display: flex; margin-top: 10px; margin-left: 50px">
            <span style="display: block; margin-top: 8px">西藏</span>
            <input v-model="full2" style="width: 80px; height: 25px; margin-left: 20px" type="text" />
            <div style="width: 40px; height: 26px; border: 1px solid #c3c3c3; text-align: center; line-height: 25px">元</div>
          </div>
          <div style="display: flex; margin-top: 10px; margin-left: 50px">
            <span style="display: block; margin-top: 8px">山东</span>
            <input v-model="full3" style="width: 80px; height: 25px; margin-left: 20px" type="text" />
            <div style="width: 40px; height: 26px; border: 1px solid #c3c3c3; text-align: center; line-height: 25px">元</div>
          </div>
          <button @click="confirm()" style="width: 230px; height: 25px; background: white; border: 1px solid #999; position: absolute; bottom: 100px; left: 320px">确认</button>
        </div>
      </div>

      <div v-if="isShow1" class="popContainer">
        <div class="popContainer-box1" style="position: relative">
          <div style="width: 100%; height: 40px; background: #bbbbbb; display: flex; justify-content: space-between" class="popContainer-box-top">
            <span style="font-size: 14px; display: block; margin-left: 20px; margin-top: 10px">选择商品</span>
            <span @click="cancel()" style="font-size: 20px; display: block; margin-right: 20px; margin-top: 8px">❌</span>
          </div>
          <div style="display: flex; justify-content: space-around; margin-top: 25px">
            <div>
              <el-select @change="change" v-model="value" placeholder="请选择">
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </div>
            <div><input placeholder="请输入关键字" style="width: 400px; height: 36px" v-model="value1" /><button @click="search1()" style="width: 80px; height: 40px">搜索</button></div>
          </div>
          <div style="width: 94%; height: 400px; background: red; margin: 50px auto">
            <el-table v-if="xian1" :data="drugList1" height="400" border style="width: 100%">
              <el-table-column label="商品" width="450">
                <img src=" http://127.0.0.1:7001/public/whjpng/yaopin.png" />
              </el-table-column>
              <el-table-column prop="price" label="商品价格" width="80"> </el-table-column>
              <el-table-column prop="stock" width="80" label="库存"> </el-table-column>
              <el-table-column width="80" label="操作">
                <template v-slot="{ row }">
                  <button @click="xua(row)" :class="[row.operation == 0 ? 'checkColor1' : 'checkColor']">{{ row.operation == 0 ? '选择' : '取消' }}</button>
                </template>
              </el-table-column>
            </el-table>
            <el-table v-if="xian" :data="drugList2" height="400" border style="width: 100%">
              <el-table-column label="商品" width="641">
                <img src=" http://127.0.0.1:7001/public/whjpng/yaopin.png" />
              </el-table-column>
              <el-table-column prop="price" label="商品价格" width="80"> </el-table-column>
              <el-table-column prop="stock" width="80" label="库存"> </el-table-column>
              <el-table-column width="80" label="操作"> </el-table-column>
            </el-table>
            <el-pagination
              style="margin-left: 501px"
              background
              layout="prev, pager, next"
              :page-size="5"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :total="drugList.length"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import provinceAndCity from '../../utils/area.json'
import { regionDataPlus } from 'element-china-area-data'
import { getDrug, upDrug } from '../../api/index'

export default {
  data() {
    return {
      isShow: false,
      isShow1: false,

      search: { current: 1, size: 6 },
      curId: 0,
      provinceAndCity,
      full: '',
      full1: '',
      full2: '',
      full3: '',
      reduce: '',
      isFalse: true,
      options: regionDataPlus,
      selectedOptions: [],
      value1: '',
      value: '',
      //选择器
      options1: [
        {
          value: '1',
          label: '感冒药',
        },
        {
          value: '2',
          label: '发烧药',
        },
        {
          value: '3',
          label: '头疼药',
        },
      ],
      drugList: [],
      drugList1: [],
      drugList2: [],
      pageNum: 5, //每页5条
      size: 1,
      xian: false,
      xian1: true,
      //选中
      check: true,
      check1: false,
    }
  },
  created() {
    this.getDrugList()
  },
  methods: {
    getDrugList() {
      getDrug().then((res) => {
        this.drugList = res.data
        this.drugList1 = this.drugList.slice(0, 5)
      })
    },
    reduce1() {
      console.log(this.full)
      console.log(this.reduce)
    },
    preservation() {
      if (this.full !== '' && this.reduce !== '') {
        this.$message({
          message: '保存成功',
          type: 'success',
        })
      }
    },
    handleChange(value) {
      this.search.province = ''
      this.search.city = ''
      this.search.district = ''
      for (var k = 0, lengthk = provinceAndCity.length; k < lengthk; k++) {
        //确定省
        if (provinceAndCity[k].code == value[0]) {
          this.search.province = provinceAndCity[k].name
          if (provinceAndCity[k].cityList && value.length >= 2 && value[1] != '') {
            for (var i = 0, lengthi = provinceAndCity[k].cityList.length; i < lengthi; i++) {
              //确定市
              if (provinceAndCity[k].cityList[i].code == value[1] || provinceAndCity[k].cityList.length == 1) {
                this.search.city = provinceAndCity[k].cityList[i].name
                break
              }
            }
          }
          break
        }
      }
      console.log(value)
      console.log(this.search.province + ',' + this.search.city + ',')
    },

    show() {
      this.isShow = true
    },
    cancel() {
      this.isShow = false
      this.isShow1 = false
    },
    confirm() {
      if (this.full1 !== '' || this.full2 !== '' || this.full3 !== '') {
        this.isShow = false
      }
    },
    choice() {
      this.isShow1 = true
    },
    change() {
      if (this.value == 1) {
        console.log(111)
        this.drugList1 = this.drugList.slice(0, 5)
      }
      if (this.value == 2) {
        this.drugList1 = this.drugList.slice(5, 10)
      }
      if (this.value == 3) {
        this.drugList1 = this.drugList.slice(10, 15)
      }
    },
    //分页
    handleSizeChange(val) {
      console.log(val)
    },
    handleCurrentChange(val) {
      this.size = val
      this.drugList1 = this.drugList.slice(val * this.pageNum - this.pageNum, val * this.pageNum)
    },
    search1() {
      console.log(this.value1)
      this.drugList1.forEach((item) => {
        console.log(item)
        if (this.value1 == item.stock) {
          this.drugList2.push(item)
          this.xian = true
          this.xian1 = false
          if (this.drugList2.length > 1) {
            this.drugList2.shift()
          }
        }
      })
    },
    xua(row) {
      console.log(row.operation)
      if (row.operation === '0') {
        upDrug({ id: row.id, operation: '1' }).then((res) => {
          this.getDrugList()
          console.log(res)
        })
      } else {
        upDrug({ id: row.id, operation: '0' }).then((res) => {
          this.getDrugList() // 重新获取一下
          console.log(res)
        })
      }
    },
    preservation() {
      if (this.full !== '' && this.reduce !== '') {
        this.$message({
          message: '保存成功',
          type: 'success',
        })
      }
    },
    clear() {
      this.full = ''
      this.reduce = ''
    },
  },
  computed: {
    multiFiled() {
      const { full, reduce } = this
      return { full, reduce }
    },
  },
  watch: {
    multiFiled() {
      if (this.full !== '' && this.reduce !== '') {
        this.isFalse = false
      }
    },
    value1() {
      if (this.value1 == '') {
        this.xian1 = true
        this.xian = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 900px;
  // 头部
  .box-top {
    width: 100%;
    // background:blue;
    // 导航
    .daohang {
      width: 100%;
      height: 50px;
    }
  }
  .middle {
    width: 100%;
    height: 500px;
    //选项卡
    .choice {
      width: 100%;
      height: 50px;
      border: 2px solid #f0f0f0;
      .cur {
        background: #ff9800;
        color: #fff;
        width: 100px;
      }
    }
    .choice-box {
      width: 100%;
      height: 500px;
      .Discount {
        width: 55%;
        height: 310px;
        background-color: #f5f7f9;
        margin-top: 40px;
        position: relative;
        .Discount-box {
          width: 97%;
          height: 240px;
          background: white;
          position: absolute;
          bottom: 20px;
          right: 0;
          .Discount-box-input {
            width: 88%;
            height: 30px;
            position: absolute;
            top: 25px;
            left: 25px;
            display: flex;
            border: 1px solid #f0f0f0;
          }
          .addDis {
            width: 100px;
            height: 30px;
            position: absolute;
            top: 75px;
            left: 25px;
            background: white;
            border: 1px solid #f0f0f0;
          }
          .addDis1 {
            width: 80px;
            height: 30px;
            position: absolute;
            top: 175px;
            left: 25px;
            background: #44abf7;
            border: 1px solid #f0f0f0;
          }
        }
      }
    }
    //满额包邮
    .Discount2 {
      width: 40%;
      height: 400px;
      margin-top: 25px;
      position: relative;
    }
  }
}
.popContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  .popContainer-box {
    width: 50%;
    background: white;
    height: 600px;
    margin-left: 15%;
    margin-top: 13%;
  }
  .popContainer-box1 {
    width: 50%;
    background: white;
    height: 600px;
    margin-left: 17%;
    margin-top: 9%;
  }
}
.reg {
  width: 500px;
  height: 40px;
  margin: 20px 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.checkColor {
  width: 55px;
  color: white;
  height: 25px;
  background: red;
  border: none;
  border-radius: 5px;
}
.checkColor1 {
  width: 55px;
  color: white;
  height: 25px;
  background: #46b2f7;
  border: none;
  border-radius: 5px;
}
.Recharge {
  width: 58%;
  height: 400px;
  margin-top: 15px;
  border-top: 5px solid #f6f8f9;
}
</style>
